<template>
  <div>
    <div class="home">
      <van-nav-bar left-arrow>
        <template #left>
          <van-image
            width="120"
            height="50"
            :src="require('@/assets/logo.png')"
            fit="contain"
          />
        </template>
        <template #right>
          <van-button
            type="primary"
            round
            icon="search"
            @click="$router.push('/search')"
          >
            搜索
          </van-button>
        </template>
      </van-nav-bar>
    </div>
    <div class="my-tabs">
      <van-tabs class="van-tabs__nav" v-model="active">
        <van-tab v-for="item in channels" :key="item.id" :title="item.name">
          <article-list :channel_id="item.id" />
        </van-tab>
        <van-icon class="icon-channel" name="wap-nav" @click="show = true" />
      </van-tabs>
    </div>

    <!-- 频道 -->
    <van-action-sheet v-model="show" title="频道管理">
      <channel-edit
        :ownChannels="channels"
        :allchannels="allchannels"
        :value="active"
        @input="active = $event"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import { channelsAPI, channelsAllAPI } from "@/api";
import articleList from "./articleList.vue";
import ChannelEdit from "./channelEdit.vue";
import { getChannel } from "@/utils/storage";

export default {
  components: { articleList, ChannelEdit },
  data() {
    return {
      channels: [],
      active: 0,
      allchannels: [],
      show: false,
    };
  },
  // 发起请求
  async created() {
    // 判断是否登录
    // 要么登录了  要么没数据没登录的情况下获取默认值
    let local = getChannel(); //从本地获取出来值
    if (this.$store.state.tokenObj.token || !local) {
      let res = await channelsAPI();
      this.channels = res.data.data.channels;
    } else {
      this.channels = local;
    }

    // 获取所有频道
    let res2 = await channelsAllAPI();
    // console.log(res2);
    this.allchannels = res2.data.data.channels;
  },
};
</script>

<style lang="less" scoped>
.home {
  .van-button--normal {
    width: 100px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.3);
    border: none;
    .van-button__icon {
      color: #fff;
    }
  }
}
.my-tabs {
  .van-tabs__nav {
    // position:absolute
    width: 90%;

    .icon-channel {
      position: absolute;
      top: 25%;
      right: -27px;
      padding-left: 10px;
      font-size: 22px;
    }
  }
}
</style>